<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        <title>MeteoCal - Homepage</title>
        <link type="text/css" rel="stylesheet" href="../resources/css/home.css" />
    </h:head>
    <h:body>
        <div id="header"></div>
        <a href="homepage.xhtml?faces-redirect=true" ><img id="logo" src="../resources/images/logo.png"/></a> 
        <h:form id="formdock">
            <p:dock position="top" maxWidth="30" itemWidth="55">
                <p:menuitem  value="Invitations" action="#{invitationBean.retriveInvitation()}" icon="/resources/images/mail.png"/>
                <p:menuitem action="#{eventBean.tocreateEvent()}" value="New Event" icon="/resources/images/new.png"/>
                <p:menuitem value="Notifications" action="#{userBean.notifications()}" icon="/resources/images/Notification.png"/>
            </p:dock>
            <p:panelGrid id="panelSearch" styleClass="panelSearch" columns="2">
                <p:autoComplete styleClass="autoCompleteSearch" placeholder="Search"  id="themePojo" value="#{scheduleUserBean.selectedTheme}" completeMethod="#{autoCompleteView.completeTheme}"
                                var="theme" itemLabel="#{theme.name}" itemValue="#{theme}" forceSelection="true" converter="themeConverter"/>
                <p:commandButton icon="ui-icon-search" id="search" value="Search" action="#{scheduleUserBean.search()}"/>
                <h:link styleClass="advSearch" id="toolTipFade" value="Advanced search" outcome="/user/advsearch?faces-redirect=true"/>
            </p:panelGrid>
            <p:menuButton value ="Options"> 
                <p:menuitem value="Profile" action="#{userBean.goToProfile()}" icon="ui-icon-person"/>
                <p:menuitem value="Export Events" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);" icon="ui-icon-arrowthick-1-s" actionListener="#{scheduleBean.createCalendarIcs()}">
                    <p:fileDownload value="#{scheduleBean.export()}" />
                </p:menuitem>
                <p:menuitem value="Import Events" onclick="PF('importDialog').show();" icon="ui-icon-arrowthick-1-n"/>
                <p:separator/>
                <p:menuitem value="Logout" action="#{LoginBean.logout()}" icon="ui-icon-power"/>
            </p:menuButton>
        </h:form>
        
        <h:form enctype="multipart/form-data">
            <p:dialog  modal="true" widgetVar="importDialog" header="Import new events" draggable="false" closable="true" resizable="false">
                    <p:growl id="growl" showDetail="true" />
                    <p:fileUpload value="#{scheduleBean.fileUploaded}" mode="simple"/>
                    <p:commandButton ajax="false" actionListener="#{scheduleBean.upload()}" value="Upload" onclick="PrimeFaces.monitorDownload(start, stop);"/>  
            </p:dialog>
        </h:form>
        
        <h:form>
            <p:dialog  modal="true" widgetVar="statusDialog" header="Loading" draggable="false" closable="false" resizable="false">
                <p:row><h:graphicImage library="images" name="progress.BAK-FOURTH.gif" /></p:row>
                <p:row>Please, wait...</p:row>
            </p:dialog>
            
            
            
            <script type="text/javascript">
                function start() {
                    PF('statusDialog').show();
                }
                
                function stop() {
                    PF('statusDialog').hide();
                }
                
            </script>
            <div class="panelBack">  
            <h:panelGrid id="panelSchedule" columnClasses="value" styleClass="calendar">
                <p:schedule timeZone="GMT+1" aspectRatio="2" id="schedule" value="#{scheduleBean.retrieveEventModel()}" widgetVar="myschedule"  resizable="false" draggable="false">
                    <p:ajax event="eventSelect" listener="#{scheduleBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                </p:schedule>
            </h:panelGrid>
     
      <p:accordionPanel rendered="#{scheduleBean.nextEvents().size()!=0}" id="accord" value="#{scheduleBean.nextEvents()}" var="ev" styleClass="accordionP">
         <p:tab title="#{ev.name}">
                <h:panelGrid columns="2" cellpadding="5">                 
                    <h:outputText value="Name:" style="font-weight: bold" />
                    <h:outputText value="#{ev.name}" />

                    <h:outputText value="Description:" style="font-weight: bold" />
                    <h:outputText value="#{ev.description == null ? '' : ev.description}" />

                    <h:outputText value="Address:" style="font-weight: bold" />
                    <h:outputText value="#{ev.address == null? '' : ev.address} (#{ev.city})" />
                    
                    <h:outputText value="From:" style="font-weight: bold" />
                    <h:outputText value="#{ev.getDateBegin().getDate()}/#{ev.getDateBegin().getMonth()+1}/#{ev.getDateBegin().getYear()+1900}  #{ev.getDateBegin().getHours()}h #{ev.getDateBegin().getMinutes()}m" />
                    
                    <h:outputText value="To:" style="font-weight: bold" />
                    <h:outputText value="#{ev.getDateEnd().getDate()}/#{ev.getDateEnd().getMonth()+1}/#{ev.getDateEnd().getYear()+1900}  #{ev.getDateEnd().getHours()}h #{ev.getDateEnd().getMinutes()}m" />
                </h:panelGrid>
            </p:tab>
        </p:accordionPanel>
      
        <p:accordionPanel rendered="#{scheduleBean.nextEvents().size()==0}" value="" styleClass="accordionP">
         <p:tab title="No next events ">
                <h:panelGrid cellpadding="5">                 
                    
                    <h:outputText value="Sorry, you do not have any event in next days. Create a new one and share it with your friends!" />

                </h:panelGrid>
            </p:tab>
        </p:accordionPanel>
      
            <p:dialog widgetVar="eventDialog" header="Event details" showEffect="clip" hideEffect="clip" resizable="false" draggable="false">
                <h:panelGrid id="eventDetails" columns="2">
                    <h:outputLabel for="name" value="Name:" />
                    <h:outputText id="name" value="#{scheduleBean.event.title}"/>
                    
                    <h:outputLabel for="description" value="Description:" />
                    <h:outputText id="description" value="#{scheduleBean.event.data}"/>

                    <h:outputLabel for="startDate" value="Start Date:" />
                    <h:outputText id="startDate" value="#{scheduleBean.event.startDate.getDate()}/#{scheduleBean.event.startDate.getMonth()+1}/#{scheduleBean.event.startDate.getYear()+1900}  #{scheduleBean.event.startDate.getHours()}h #{scheduleBean.event.startDate.getMinutes()}m"/>

                    <h:outputLabel for="endDate" value="End Date:" />
                    <h:outputText id="endDate" value="#{scheduleBean.event.endDate.getDate()}/#{scheduleBean.event.endDate.getMonth()+1}/#{scheduleBean.event.endDate.getYear()+1900}  #{scheduleBean.event.endDate.getHours()}h #{scheduleBean.event.endDate.getMinutes()}m"/>
                    
                    <p:commandButton action="#{scheduleBean.gotoPage()}" value="Event page"/>
                </h:panelGrid>
            </p:dialog>
          <p:dialog header="Event Details" draggable="false" closable="false" resizable="false">-->
                <h:panelGrid id="eventDay" columns="2">
                    <c:forEach var="y" items="#{scheduleBean.eventsDay}">
                        <h:outputLabel for="name" value="#{y.getName()}" />
                        <h:outputText id="title" value="#{y.toString()}" />  
                    </c:forEach>
                </h:panelGrid>
            </p:dialog>
            </div>
</h:form>

    </h:body>
</html>

